<template>
	<view class="my-wallet">
		<view class="m-w-top">
			<view class="m-w-t-account">
				<uni-section class="section" title="我的账户" type="line">
					<view class="sec-boy">
						<text class="t-a-text">{{data.balance || '0.00'}}元</text>
						<text class="t-a-text1">今日总收入</text>
					</view>
				</uni-section>
				<uni-section class="section" title="申诉次数" type="line">
					<view class="sec-boy">
						<text class="t-a-text">{{data.complaint_appealnum || '0'}}次</text>
						<text class="t-a-text1">申诉{{data.complaint_appealnum || '0'}}次（总计{{data.complaint_totalnum || '0'}}次）</text>
					</view>
				</uni-section>
			</view>
			<view class="m-w-t-tag">
				<uni-row>
					<uni-col :span="6" :key="item.id" v-for="item in tabData" @click.native="colsClick(item.path)">
						<image class="h-t-img" :src="item.img" mode="aspectFit"></image>
						<text class="h-t-text">{{item.text || ''}}</text>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<view class="m-w-end">
			<view class="m-w-e-boy">
				<uni-section class="e-b-input" title="输入提现金额" >
					<view class="com">
						<uni-easyinput :clearable="false" type="number" v-model="value" placeholder="请输入金额"></uni-easyinput>
					</view>
				</uni-section>	
				<uni-section class="e-b-choice" title="选择提现方式">
					<view class="com">
						<radio-group @change="radioChange">
							<label class="b-c-label" v-for="(item, index) in items" :key="item.value">
								<view class="b-c-box">
									<image class="b-c-img" :src="item.img" mode="aspectFit"></image>
									<view class="b-c-text">{{item.name || ''}}</view>
								</view>
								<view>
									<radio :value="item.value" style="transform:scale(0.7)" />
								</view>
							</label>
						</radio-group>
					</view>
				</uni-section>	
				<view class="m-w-e-butt">
					<button class="but" plain @click="onClick">申请提现</button>
				</view>
				<uni-section class="e-b-con" title="提现说明">
					<view class="b-c-text">
						<text>{{data.description}}</text>
					</view>
				</uni-section>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				data:{}, // 请求的数据
				tabData:[ // 中间操作tab 的数据
					{
						id:1,
						img:`${getApp().globalData.imgScr}bj/tixianjilu.png`,
						text:'提现记录',
						path:'withdraw-record',
					},{
						id:2,
						img:`${getApp().globalData.imgScr}bj/yinhangka.png`,
						text:'银行卡',
						path:'bank-card',
					},{
						id:3,
						img:`${getApp().globalData.imgScr}bj/weigueishensu.png`,
						text:'违规记录',
						path:'appeal',
					},{
						id:4,
						img:`${getApp().globalData.imgScr}bj/shourumingxi.png`,
						text:'收入明细',
						path:'details',
					},
					],
					value:'', // 输入的金额
					items: [{
							value: '1',
							name: '微信',
							img:`${getApp().globalData.imgScr}bj/weixin.png`,
						},
						{
							value: '2',
							name: '银行卡',
							img:`${getApp().globalData.imgScr}bj/yihangka.png`,
						},
					],
					option:'', // 提现方式的选项值
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			/**
			 * 立即提现按钮
			 */
			async onClick() {
				if(this.data.balance < 1){
					uni.showToast({
						title:'账户余额不足1元，无法体现！',
						icon:"none",
						success() {
							return
						}
					})
				}else if(!this.data.balance) {
					uni.showToast({
						title:'暂无可体现金额',
						icon:"none",
						success() {
							return
						}
					})
				}else if(this.value == ""){
					uni.showToast({
						title:'请输入提现金额',
						icon:"none",
						success() {
							return
						}
					})
				}else if(this.value > this.data.balance){
					uni.showToast({
						title:'余额不足',
						icon:"none",
						success() {
							return
						}
					})
				}else if(this.option == "") {
					uni.showToast({
						title:'请选择提现方式',
						icon:"none",
						success() {
							return
						}
					})
				}else {
					try{
						let res = await this.$http.post('/index/Cleanerindex/cleaner_withdrawal_order',{
							price:this.value,
							applytype:this.option
						})
						// 重置 data() 数据
						Object.assign(this.$data,this.$options.data())
						this.getData()
						uni.showToast({
							title:"申请成功"
						})
					}catch(e){
						//TODO handle the exception
						uni.showToast({
							title:e.errMsg,
							icon:"none"
						})
					}
				}
			},
			/**
			 *  tag 操作兰
			 * @param {string} path
			 */
			colsClick(path) {
				let url = '/cleaningAdmin/my-wallet'
				uni.navigateTo({
					url: `${url}/${path}/${path}`
				});
			},
			/**
			 * 提现方式单选按钮触发
			 * @param {Object} e 弹窗单选按钮的value 值
			 */
			radioChange(e) {
				this.option = e.target.value
			},
			/**
			 * 获取数据
			 */
			async getData() {
				try{
					let res = await this.$http.post('/index/Cleanerindex/myWallet')
					this.data = res
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.my-wallet {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100vh;
	// 上半部分样式
	.m-w-top {
		width: 100%;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		// 账户及申诉样式
		.m-w-t-account {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 32rpx;
			// 统一的标题样式
			.section {
				flex: 1;
				.uni-section {
					display: flex;
					flex-direction: column;
					align-items: center;
					// 标题左边的竖线
					.line {
						width: 4rpx;
						height: 24rpx;
						background-color: #F33039;
					}
					// 标题字体样式
					.distraction {
						font-size: 28rpx;
						font-weight: 600;
					}
					// 内容字体样式
					.sec-boy {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						.t-a-text {
							font-size: 40rpx;
							font-weight: 600;
							color: #333333;
							margin-bottom: 20rpx;
						}
						.t-a-text1 {
							font-size: 20rpx;
							font-weight: 500;
							color: #999999;
						}
					}
				}
			}
			.section1 {
				.uni-section {
					.line { 
						background-color: #54E58D;
					}
				}
			}
		}
		// tag卡片样式
		.m-w-t-tag {
			margin-bottom: 32rpx;
			.uni-col {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.h-t-img {
					width: 80rpx;
					height: 50rpx;
					margin-bottom: 10rpx;
				}
				.h-t-text {
					font-size: 24rpx;
					font-weight: 600;
					color: #333333;
				}
			}
		}
	}
	// 下半部分样式
	.m-w-end {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		background-color: #FFFFFF;
		// 内容样式
		.m-w-e-boy {
			width: 100%;
			flex: 1;
			margin-bottom: 20rpx;
			// 统一的标题样式
			.uni-section {
				// 标题字体样式
				.uni-section-header {
					padding: 36rpx 34rpx;
				}
				.distraction {
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
				}
			}
			.com {
				padding: 0 34rpx;
			}
			// 输入金额栏样式
			.e-b-input {
				.uni-easyinput__content-input {
					padding: 20rpx;
				}
			}
			// 说明栏样式
			.e-b-con {
				.uni-section {
					margin: 0;
					padding-bottom: 20rpx;
					background-color: rgba($color: #F5F7FD, $alpha: 0.5);
				}
				.uni-section-header {
					padding: 36rpx 55rpx 24rpx;
					.uni-section__content-title {
						font-size: 24rpx;
					}
				}
				.b-c-text {
					font-size: 20rpx;
					font-weight: 600;
					color: #666666;
					padding: 0 56rpx;
					line-height: 2.0em;
				}
			}
			// 选择提现方式 样式
			.e-b-choice {
				.b-c-label {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 40rpx;
					.b-c-box {
						display: flex;
						align-items: center;
						.b-c-img {
							width: 58rpx;
							height: 54rpx;
							border: 0;
							margin-right: 20rpx;
						}
						.b-c-text {
							font-size: 28rpx;
							font-weight: 600;
							color: #333333;
						}
					}
				}
			}
		}
		// 提现按钮样式
		.m-w-e-butt {
			box-sizing: border-box;
			width: 100%;
			padding: 40rpx 32rpx;
			background-color: #FFFFFF;
			.but {
				box-sizing: border-box;
				color: #FFFFFF;
				background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
				border-radius: 40rpx;
				line-height: 80rpx;
				border: 0;
			}
		}
	}
}
</style>
